<script setup lang="ts">
import type { FormItemDefineProps } from './props';

const props = withDefaults(defineProps<FormItemDefineProps>(), {
    type: 'input',
});

const emit = defineEmits<{
    (event: 'update:modelValue', value: any): void;
}>();

const value = computed<any>({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    },
});

const formatCssSize = (val: string | number) => {
    let size = '';
    if (typeof val === 'number') {
        size = `${val}px`;
    } else if (typeof val === 'string') {
        size = val;
    }
    return size;
};
</script>

<template>
    <el-form-item ref="formItem" :prop="props.prop" :label="props.label">
        <el-select v-if="props.type === 'select'" v-model="value" v-bind="props.contentProps">
            <el-option v-for="item in props.data" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-checkbox-group v-else-if="props.type === 'checkbox'" v-model="value" v-bind="props.contentProps">
            <el-checkbox v-for="item in props.data" :key="item.value" :value="item.value" :style="{ width: formatCssSize(props?.contentExtends?.width || '') || 'auto' }">
                {{ item.label }}
            </el-checkbox>
        </el-checkbox-group>
        <el-switch v-else-if="props.type === 'switch'" v-model="value" v-bind="props.contentProps"> </el-switch>
        <my-form-upload v-else-if="props.type === 'upload'" v-model="value" :props="props.contentProps" :extends="props.contentExtends"></my-form-upload>
        <el-input v-else v-model="value" v-bind="props.contentProps">
            <template v-if="props.contentExtends?.prefix" #prefix>
                <ElIcon :size="16"><MyIcon :name="props.contentExtends?.prefix"></MyIcon></ElIcon>
            </template>
            <template v-if="props.contentExtends?.suffix" #prefix>
                <ElIcon :size="16"><MyIcon :name="props.contentExtends?.suffix"></MyIcon></ElIcon>
            </template>
            <template v-if="props.contentExtends?.prepend" #prepend>
                {{ props.contentExtends?.prepend }}
            </template>
            <template v-if="props.contentExtends?.append" #prefix>
                {{ props.contentExtends?.append }}
            </template>
        </el-input>
    </el-form-item>
</template>

<style scoped></style>
